<script setup>
import { reactive, ref,getCurrentInstance,computed } from 'vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
import { findBoxOrderPage, getCurUserShipAddress, setCurUserShipAddress,editAvatar, findToBeRedeemedPage, getUserWallet,editPwd, physicalItemPickup, getUserInfo,findUserShipmentsPage, platformVirtualCurrencyExchange,changeUserBasisInfo,confirmReceipt } from '../../http/api'

import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
const { proxy } = getCurrentInstance()
const { $t } = proxy;
let numberExchange = ref(proxy.$numberExchange)
locale.value = localStorage.getItem('lang') || 'zhCN'
const localeCom = computed(() => (locale.value === 'en' ?  en : zhCn ))
// import { ElMessage } from 'element-plus';
import { useRouter, useRoute } from 'vue-router'
import editPopup from '../../components/editPopup/index.vue'
import { ElMessage } from 'element-plus';
// import { ElMessage } from 'element-plus';
const router = useRouter()
const route = useRoute()
let input2 = ref('')
// 个人中心菜单路由下标
let pageIndex = ref('1')
// import { ElMessage } from 'element-plus';
// 用户信息对象
let userInfo = ref(undefined)
// 获取用户钱包信息
const getUserWalletFn = async()=>{
    let res = await getUserWallet()
    console.log(res,'res进去了4999999')
    if(res.code === 200){
        userInfo.value.balance = res.result.balance
    }
}
const baseUrl = ref(import.meta.env.VITE_APP_BASE_URL)
// 获取用户信息接口
const getUserInfoFn = async()=>{
     let res = await getUserInfo()
     if(res.success){
        userInfo.value = res.result
        getUserWalletFn()
     }
     console.log(res,'用户信息打印')
}
getUserInfoFn()
// 判断用户是否登录
// let userInfos = localStorage.getItem('userInfo')
// if (userInfos) {
//     userInfo.value = JSON.parse(userInfos)
    
// }
// 国家值
let inputAdress = reactive({
    data: {
        apartment: '',
        city: '',
        country: '',
        phoneNumber: '',
        region: '',
        street: '',
        zipCode: '',
    }
})
let menuIshowObj = reactive({
    // 账户中心是否显示
    menuIshow1: true,
    // 项目是否显示
    menuIshow2: false,
    // 出货量是否显示
    menuIshow3: false,
    menuIshow4: false,
    menuIshow5: false,
    menuIshow6: false,
    menuIshow7: false,
})
// 扭蛋金币数组
let eggMoneyCountList = reactive([{ count: 1, id: '1' }, { count: 10, id: '2' }, { count: 50, id: '3' }, { count: 500, id: '4' }, { count: 1000, id: '5' },])
let countIndex = ref(0)
// 点击左侧导航选项
const selectMenu = (index, indexPath, item, routerData) => {
    // return
    for (let key in menuIshowObj) {
        if (key.slice(-1) === index) {
            menuIshowObj[`menuIshow${index}`] = true

        } else {
            menuIshowObj[`menuIshow${key.slice(-1)}`] = false
        }

    }
    console.log(index,'daras')

    // if(index === '3'){
    //     getfindUserShipmentsPage(1,6)
    // }
    router.push({ name: 'personCenter', query: { pageIndex: index } })

    // console.log(data,'data')
}
// 获取图片路径资源
const getImageUrl = (name) => {
    return new URL(`../../assets/img/home/${name}`, import.meta.url).href
}
// 获取图片路径资源
const getImageUrl3 = (name) => {
    return new URL(`../../assets/img/personCenter/${name}`, import.meta.url).href
}
// 弹窗各个节点是否显示的对象
let showObj = reactive({
    show1: true,
    show2: false,
    show3: false,
    show4: false,
})
const changeCountIndex = (index) => {
    countIndex.value = index
}
const changeShowClick = (num) => {

    showObj[`show${num}`] = !showObj[`show${num}`]
}
let projectTotal = ref(0)
let projectTotals = ref(0)
let shipmentTotal = ref(0)
const currentPage4 = ref(1)
const currentPage5 = ref(1)
const pageSize4 = ref(6)
const pageSize5 = ref(6)
const currentPage4s = ref(1)
const pageSize4s = ref(6)
const small = ref(false)
const background = ref(true)
const disabled = ref(false)
// 已购买扭蛋列表
let eggList = reactive({
    list: [1, 2, 1, 1, 1]
})
// let detailInfo = 
// 已购买扭蛋列表接口
const findBoxOrderPageFunc = async (pageNo, pageSize) => {
    let res = await findBoxOrderPage({
        pageNo,
        "pageSize": pageSize ? pageSize : 6
    })
    eggList.list = res.records
    projectTotals.value = res.total
    console.log(res, '扭蛋列表获取')
}
findBoxOrderPageFunc(1)

// 获取用户当前收货地址
const getCurUserShipAddressFunc = async () => {
    let res = await getCurUserShipAddress()
    console.log(res, 'res收货地址')
    inputAdress.data = res
    return res
}
getCurUserShipAddressFunc()

// 设置用户当前收货地址
const setCurUserShipAddressFunc = async () => {
    let flag = false
    for (let key in inputAdress.data) {
        if (!inputAdress.data[key]) {
            flag = true
        }
    }
    if (flag) return ElMessage.warning($t('msg.message.formCannotBeEmpty'))
    let res = await setCurUserShipAddress({ ...inputAdress.data })
    console.log(res, 'res设置收货地址')

    if (res.success) return ElMessage.success($t('msg.message.saveSuccess'))
    if (!res.success) return ElMessage.error(res.message)

}
// 出货量数组
let shipmentList = reactive({
    list: []
})
// 项目数组
let projectList = reactive({
    list: []
})

const handleSizeChange2 = (val) => {
    console.log(`${val} items per page`)
    //   getfindToBeRedeemedPage(val)
    findBoxOrderPageFunc(1, val)
}
const handleCurrentChange2 = (val) => {
    console.log(`current page: ${val}`)
    //   getfindToBeRedeemedPage(val)
    findBoxOrderPageFunc(val)


}
const handleSizeChange = (val) => {
    console.log(`${val} items per page`)
    getfindToBeRedeemedPage(1, val)
}
const handleCurrentChange = (val) => {
    console.log(`current page: ${val}`)
    getfindToBeRedeemedPage(val)

}

// 获取出货量列表
const getfindUserShipmentsPage = async (pageNo, pageSize) => {
    let res = await findUserShipmentsPage({ pageNo, pageSize: pageSize ? pageSize : pageSize4.value })

    if (res.success) {
        console.log(res, 'res出货量')
        if (res.result.records.length) {
            shipmentList.list = res.result.records

        } else {
            shipmentList.list = []
        }
        shipmentTotal.value = res.result.total
    } else {
        ElMessage.error(res.message)
    }
}
getfindUserShipmentsPage(1, 6)

// 出货量分页
const handleSizeChange3 = (val) => {
    console.log(`${val} items per page`)
    getfindUserShipmentsPage(1, val)
}
const handleCurrentChange3 = (val) => {
    console.log(`current page: ${val}`)
    getfindUserShipmentsPage(val)

}
// 获取用户未兑换的礼品 分页列表
const getfindToBeRedeemedPage = async (pageNo, pageSize) => {
    let res = await findToBeRedeemedPage({ pageNo, pageSize: pageSize ? pageSize : pageSize4.value })
    console.log(res, '获取用户未兑换的礼品 分页列表')
    if (res.success) {
        if (res.result.records.length) {
            projectList.list = res.result.records
        } else {
            projectList.list.length = 0
        }
        projectTotal.value = res.result.total
    }
}
getfindToBeRedeemedPage(1)

let maskShow3 = ref(false)
let editPassWord = reactive({
    data: {
        pwd: '',
        pwd2: ''
    }
})
// 修改密码
const sureEditPwd = async () => {
    if (editPassWord.data.pwd === '' || editPassWord.data.pwd2 === '') {
        return ElMessage.warning($t('msg.message.CannotEnterEmpty'))

    }
    if (editPassWord.data.pwd !== editPassWord.data.pwd2) {
        return ElMessage.warning($t('msg.message.passwordsBefore'))

    }
    let res = await editPwd({ newPassword: editPassWord.data.pwd })

    console.log(res)
    if (res.success) {
        maskShow3.value = false
        ElMessage.success($t('msg.message.modificationSuccessful'))
        router.push({name:'home'})
        localStorage.removeItem('token')
        localStorage.removeItem('userInfo')
    } else {
        ElMessage.error(res.message)
    }
}
// 立即提货 点击展示提示
let addressTipObj = reactive({data:{}})
let addressTipsShow = ref(false)
let userGiftsIdVal = ref('')
const nowPhysicalItemPickup = async (userGiftsId) => {
    let reObj = await getCurUserShipAddressFunc()
    userGiftsIdVal.value = userGiftsId
    console.log(userGiftsId.value, 'reobk')
    // return
    if (!reObj.apartment || !reObj.city || !reObj.country) {
        return ElMessage.warning($t('msg.message.harvestAddress'))
    }
    addressTipsShow.value = true
    addressTipObj.data = reObj
}
// 立即提货 确认点击
const nowTihuo = async () =>{ 
    let res = await physicalItemPickup({ userGiftsId:userGiftsIdVal.value })
    console.log(res, 'res十三水')
    if (res.success) {
        ElMessage.success($t('msg.message.DeliverySuccess'))
        addressTipsShow.value = false
        getfindToBeRedeemedPage(1)
        currentPage4.value = 1
    } else {
        ElMessage.error(res.message)
    }
}
console.log(route, 'route')
if (route.query.pageIndex) {
    pageIndex.value = route.query.pageIndex

    selectMenu(pageIndex.value)
}
// 加密货币头部tab数组
let moneyCountList = reactive([{ count: $t('msg.message.RMB') }, { count: $t('msg.message.dollar') }])
let moneyCountListBtc = reactive([{ count: 'xxx' }, { count: 'xx' }])
let countIndexCode = ref(0)
const moneyCountClick = (index) => {
    countIndexCode.value = index
}
// 立即前往（跳转奖品清单）
const gotoPrize = () => {
    router.push('prize')
}

const fileList = ref([
    // {
    //     name: 'element-plus-logo.svg',
    //     url: 'https://element-plus.org/images/element-plus-logo.svg',
    // },
    // {
    //     name: 'element-plus-logo2.svg',
    //     url: 'https://element-plus.org/images/element-plus-logo.svg',
    // },
])

const handleRemove = (file, uploadFiles) => {
    console.log(file, uploadFiles)
}
let headers = ref({['X-Access-Token']:localStorage.getItem('token')})
// 修改图片
const handleSuccess = (response, uploadFile)=>{
    if(response.success){
        let imgName = response.message
        editAvatar({headPortrait:imgName}).then(res=>{
            console.log(response, uploadFile,res,'上传成功····')
            if(res.success){
                getUserInfoFn()
            }
        })
    }
}
const handlePreview = (uploadFile) => {
    console.log(uploadFile)
}

const handleExceed = (files, uploadFiles) => {
    // ElMessage.warning(
    //     `The limit is 3, you selected ${files.length} files this time, add up to ${files.length + uploadFiles.length
    //     } totally`
    // )
    fileList.value = []
}

const beforeRemove = (uploadFile, uploadFiles) => {
    // return ElMessageBox.confirm(
    //     `Cancel the transfer of ${uploadFile.name} ?`
    // ).then(
    //     () => true,
    //     () => false
    // )
    fileList.value = []
}
const handleUpload = (file)=>{
    console.log(file,'文件上传')
}
// 用户名弹窗input值
let usernameVal = ref('')
// 用户名弹窗是否显示
let usernameShow = ref(false)
// 昵称弹窗input值
let acVal = ref('')
// 昵称弹窗是否显示
let acShow = ref(false)
// 邮箱弹窗input值
let emailVal = ref('')
// 邮箱弹窗是否显示 
let emailShow = ref(false)

let telVal = ref('')
let telShow = ref(false)
const closePupop = () => {
    usernameShow.value = false
}
const closeAcPupop = () => {
    acShow.value = false
}
const closeEmPupop = () => {
    emailShow.value = false
}
const closeTelPupop = () => {
    telShow.value = false
}
// 修改用户名确定
const acSure = async() => {
    if (acVal.value === '') {
        return nullReturnMsg( $t('msg.message.CannotEnterEmpty'))
    }
    let res = await changeUserBasisInfo({username:acVal.value})
    if(res.success){
        ElMessage.success(res.message)
        acShow.value = false
        getUserInfoFn()
    }else{
        ElMessage.error(res.message)
    }
    console.log(res,'用户名确定')
}
// 修改昵称确定
const usernameSure = async() => {
    if (usernameVal.value === '') {
        return nullReturnMsg($t('msg.message.CannotEnterEmpty'))
    }
    let res = await changeUserBasisInfo({realName:usernameVal.value,email:userInfo.value.email})
    if(res.success){
        ElMessage.success(res.message)
        usernameShow.value = false
        getUserInfoFn()
    }else{
        ElMessage.error(res.message)
    }
    console.log(res,'修改昵称返回')
}
// 修改邮箱确定
const emailSure = async() => {
    if (emailVal.value === '') {
        return nullReturnMsg($t('msg.message.CannotEnterEmpty'))
    }
    let reg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
    if (!reg.test(emailVal.value)) {
        return nullReturnMsg($t('msg.message.EmailFormatError'))
    }
    let res = await changeUserBasisInfo({realName:userInfo.value.realname,email:emailVal.value})
    if(res.success){
        ElMessage.success(res.message)
        emailShow.value = false
        getUserInfoFn()
    }else{
        ElMessage.error(res.message)
    }
    console.log(res,'修改邮箱返回')
    console.log(122345464646446)
}
const telSure = () => {
    if (telVal.value === '') {
        return nullReturnMsg($t('msg.message.CannotEnterEmpty'))
    }

}
const changeDataValUn = (val) => {
    usernameVal.value = val
}
const changeDataValAc = (val) => {
    acVal.value = val
}
const changeDataValEm = (val) => {
    emailVal.value = val
}
const changeDataValTe = (val) => {
    telVal.value = val
}
//警告提示
const nullReturnMsg = (msg) => {
    ElMessage.warning(msg)

}
let getSerachShow = ref(false)
let inputNiubi = ref(0)
// 充值
const addMoney = () => {
    if (inputNiubi.value < 50) {
        return ElMessage.warning($t('msg.message.InsufficientPoints'))
    }
}
let exchageShow = ref(false)
let exchageItem = ref(null)
// 兑换虚拟币
const getPlatformVirtualCurrencyExchange = async () => {
    // console.log(exchageItem.value,'兑换虚拟币')
    // return
    let res = await platformVirtualCurrencyExchange({ userGiftsId: exchageItem.value.id })
    // console.log(res, 11111)
    if (res.success) {
        ElMessage.success($t('msg.message.exchangedVirtual'))
        getfindToBeRedeemedPage(1)
        getUserInfoFn()
        currentPage4.value = 1
    } else {
        ElMessage.warning(res.message)
    }
    exchageShow.value = false
}
const changePage = (val)=>{
    if(val){
        selectMenu(val)
    }
    console.log(val,'va22222')

}
const lookDetailEgg = (item)=>{
    console.log(item,'gacBoxOrderId 打印')
    // return
    let id = item.orderBoxInfo.gacBoxId
    router.push({name:`raffle`,query:{id}})
}
let isDark = ref(true)
if(localStorage.getItem('isDark') !== undefined){
    isDark.value = localStorage.getItem('isDark') === 'true' ? true : false
}

// 子组件返回的切换主题颜色
const changeIsDarkEmit = (val) => {
    isDark.value = val
}
// 全局颜色背景色
const {
  proxy: { darkTextColor,lightTextColor,lightbgColor,darkbgColor,f1Color },
} = getCurrentInstance();

let colorObjInfo = reactive({
    data:{
        darkTextColor,
        lightTextColor,
        lightbgColor,
        darkbgColor,
        f1Color
    }
})
// 获取图片路径资源
const getImageUrl2 = (name) => {
    return new URL(`../../assets/img/workPrin/${name}`, import.meta.url).href
}
console.log(colorObjInfo.data,'全局颜色背景色')
let sureGetShow = ref(false)
let orderId = ref('')
// 确认收货
const confirmReceiptClick = async (item) => {
    // return
    orderId.value = item.id
    sureGetShow.value = true
}
// 确认收货确定
const sureGet = async () => {
    let res = await confirmReceipt({exchangeRecordId:orderId.value})
    console.log(res,'确认收货')
    if(res.success){
        ElMessage.success(res.message)
        getfindUserShipmentsPage(1, 6)
        currentPage5.value = 1
    }else{
        ElMessage.error(res.message)
    }
    sureGetShow.value = false
}
</script>

<template>
    <div class="homeBody" :style="{ background: isDark ? `url(${getImageUrl('bg.png')})` : `url(${getImageUrl('bg2.png')})` }">
        <headNavigation @changePage="changePage" @changeIsDarkEmit="changeIsDarkEmit"  :isDark="isDark"  :userInfo="userInfo"></headNavigation>
        <div class="personBig">
            <div class="personL">
                <div class="personLHead" :style="{background:isDark?'#1F1F1F':'#fff'}">
                    <img :src="userInfo.avatar ?baseUrl+'/sys/common/static/'+ userInfo.avatar : getImageUrl3('logo.png')" alt="" :class="isDark ? 'borderfff' : 'border000'">
                    <div :style="{color:!isDark?'#1F1F1F':'#fff'}">{{ userInfo?.realname}}</div>
                </div>
                <div class="personMenu">
                    <el-menu router :active-text-color="!isDark?'#fff': '#27D698'" @select="selectMenu" :background-color="isDark?'#000000':'#fff'"
                        class="el-menu-vertical-demo" :text-color="!isDark?'#000000':'#fff'">
                        <el-menu-item index="1" :class="route.query.pageIndex === '1' ? 'is-active' : ''">

                            <span>{{$t('msg.message.AccountCenter')}}</span>
                        </el-menu-item>
                        <el-menu-item index="2" :class="route.query.pageIndex === '2' ? 'is-active' : ''">

                            <span>{{$t('msg.message.project')}}</span>
                        </el-menu-item>
                        <el-menu-item index="3" :class="route.query.pageIndex === '3' ? 'is-active' : ''">

                            <span>{{$t('msg.message.Shipment')}}</span>
                        </el-menu-item>
                        <el-menu-item index="4" :class="route.query.pageIndex === '4' ? 'is-active' : ''">

                            <span>{{$t('msg.message.PurchasedTwistedEgg')}}</span>
                        </el-menu-item>
                        <el-menu-item index="5" :class="route.query.pageIndex === '5' ? 'is-active' : ''">

                            <span>{{$t('msg.message.extract')}}</span>
                        </el-menu-item>
                        <el-menu-item index="6" :class="route.query.pageIndex === '6' ? 'is-active' : ''">

                            <span>{{$t('msg.message.reward')}}</span>
                        </el-menu-item>
                        <el-menu-item index="7" :class="route.query.pageIndex === '7' ? 'is-active' : ''">

                            <span>{{$t('msg.message.Recharge')}}</span>
                        </el-menu-item>
                    </el-menu>
                </div>
            </div>
           
            <div class="personR" v-show="menuIshowObj.menuIshow1">
                <div class="personRList" :style="{background:isDark ? colorObjInfo.data.darkbgColor: colorObjInfo.data.lightbgColor}">
                    <div class="personRLtitle" :style="{width:locale === 'en' ? '162px' : '103px',color:isDark? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">{{$t('msg.message.personalData')}}</div>
                    <div class="personRItem">
                        <div class="personRItemAvatar" :style="{color:isDark? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">{{$t('msg.message.avatar')}}</div>
                        <div class="personRItemR">
                            <img :src="userInfo.avatar ?baseUrl+'/sys/common/static/'+ userInfo.avatar : getImageUrl3('logo.png')" :class="isDark ? 'borderfff' : 'border000'" alt="">
                            <el-upload v-model:file-list="fileList" class="upload-demo"
                                :action="baseUrl + '/sys/common/upload'"
                                :headers="headers"
                                :on-preview="handlePreview" :on-success="handleSuccess" :before-upload="handleUpload" :show-file-list="false" :on-remove="handleRemove"
                                :before-remove="beforeRemove"  :on-exceed="handleExceed">
                                <div :class="locale === 'en' ? 'personRItemRdiv w150' : 'personRItemRdiv'" >{{$t('msg.message.change')}}{{$t('msg.message.avatar')}}</div>
                            </el-upload>
                        </div>

                    </div>
                    <div class="personRItem">
                        <div class="personRItemAvatar" :style="{color:isDark? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">{{$t('msg.message.userName')}}</div>
                        <div class="personRItemR">
                            <div class="personRItemText" :style="{color:isDark? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">{{ userInfo?.username }}</div>
                            <!-- <div :class="locale === 'en' ? 'personRItemRdiv w150' : 'personRItemRdiv'" @click="acShow = true">{{$t('msg.message.change')}}</div> -->
                        </div>

                    </div>
                    <div class="personRItem">
                        <div class="personRItemAvatar" :style="{color:isDark? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">{{$t('msg.message.nickName')}}</div>
                        <div class="personRItemR">
                            <div class="personRItemText" :style="{color:isDark? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">{{ userInfo?.realname }}</div>
                            <div :class="locale === 'en' ? 'personRItemRdiv w150' : 'personRItemRdiv'" @click="usernameShow = true">{{$t('msg.message.change')}}{{$t('msg.message.nickName')}}</div>
                        </div>

                    </div>
                    <div class="personRItem">
                        <div class="personRItemAvatar" :style="{color:isDark? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">{{$t('msg.message.email')}}</div>
                        <div class="personRItemR">
                            <div class="personRItemText" :style="{color:isDark? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">{{ userInfo?.email }}</div>
                            <div :class="locale === 'en' ? 'personRItemRdiv w150' : 'personRItemRdiv'" @click="emailShow = true">{{$t('msg.message.change')}}{{$t('msg.message.email')}}</div>
                        </div>

                    </div>
                </div>

                <div class="personRList" :style="{background:isDark ? colorObjInfo.data.darkbgColor: colorObjInfo.data.lightbgColor}">
                    <div class="personRLtitle" :style="{width:locale === 'en' ? '203px' : '103px',color:isDark? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">{{$t('msg.message.AccountSecurity')}}</div>
                    <div class="personRItem">
                        <div class="personRItemAvatar" :style="{color:isDark? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">{{$t('msg.message.ChangePassword')}}</div>
                        <div class="personRItemR">
                            <div class="personRItemText" :style="{color:isDark? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">{{ userInfo?.password }}</div>
                            <div :class="locale === 'en' ? 'personRItemRdiv w150' : 'personRItemRdiv'" @click="maskShow3 = true">{{$t('msg.message.ChangePassword')}}</div>
                        </div>

                    </div>
                    <div class="personRItem">
                        <div class="personRItemAvatar" :style="{color:isDark? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">{{$t('msg.message.PhoneBinding')}}</div>
                        <div class="personRItemR">
                            <div class="personRItemText" style="display: flex;align-items: center;">
                                <img src="../../assets/img/personCenter/ok.png" style="border: unset;" alt="">
                                <div :style="{'padding-left': '5px', color:isDark? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">{{$t('msg.message.BoundPhoneNumber')}}：138****1294</div>
                            </div>
                            <!-- <div :class="locale === 'en' ? 'personRItemRdiv w150' : 'personRItemRdiv'" @click="telShow = true">{{$t('msg.message.change')}}{{ $t('msg.message.phone')}}</div> -->
                        </div>

                    </div>

                </div>
                <div class="personRList" :style="{background:isDark ? colorObjInfo.data.darkbgColor: colorObjInfo.data.lightbgColor}">
                    <div class="personRLtitle" :style="{width:locale === 'en' ? '211px' : '103px',color:isDark? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">{{$t('msg.message.ReceivingAddress')}}</div>
                    <div class="personRItem">
                        <div class="personRItemAvatar" :style="{width: '10%',color:isDark? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">{{$t('msg.message.country')}}</div>
                        <div class="personRItemR" style="width: 84%;">
                            <div :class="isDark? 'searchBox': 'searchBoxLight' ">
                                <el-input v-model="inputAdress.data.country" :placeholder="$t('msg.message.PleaseEnter')" />
                            </div>
                        </div>

                    </div>
                    <div class="personRItem">
                        <div class="personRItemAvatar" :style="{width: '10%',color:isDark? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">{{$t('msg.message.region')}}</div>
                        <div class="personRItemR" style="width: 84%;">
                            <div :class="isDark? 'searchBox': 'searchBoxLight' ">
                                <el-input v-model="inputAdress.data.region" :placeholder="$t('msg.message.PleaseEnter')"  />

                            </div>
                        </div>

                    </div>
                    <div class="personRItem">
                        <div class="personRItemAvatar" :style="{width: '10%',color:isDark? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">{{$t('msg.message.city')}}</div>
                        <div class="personRItemR" style="width: 84%;">
                            <div :class="isDark? 'searchBox': 'searchBoxLight' ">
                                <el-input v-model="inputAdress.data.city" :placeholder="$t('msg.message.PleaseEnter')"  />

                            </div>
                        </div>

                    </div>
                    <div class="personRItem">
                        <div class="personRItemAvatar" :style="{width: '10%',color:isDark? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">{{$t('msg.message.zipCode')}}</div>
                        <div class="personRItemR" style="width: 84%;">
                            <div :class="isDark? 'searchBox': 'searchBoxLight' ">
                                <el-input v-model="inputAdress.data.zipCode" :placeholder="$t('msg.message.PleaseEnter')" />
                            </div>
                        </div>
                    </div>
                    <div class="personRItem">
                        <div class="personRItemAvatar"  :style="{width: '10%',color:isDark? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">{{$t('msg.message.street')}}</div>
                        <div class="personRItemR" style="width: 84%;">
                            <div :class="isDark? 'searchBox': 'searchBoxLight' ">
                                <el-input v-model="inputAdress.data.street" :placeholder="$t('msg.message.PleaseEnter')"  />
                            </div>
                        </div>

                    </div>
                    <div class="personRItem">
                        <div class="personRItemAvatar"  :style="{width: '10%',color:isDark? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">{{$t('msg.message.apartment')}}</div>
                        <div class="personRItemR" style="width: 84%;">
                            <div :class="isDark? 'searchBox': 'searchBoxLight' ">
                                <el-input v-model="inputAdress.data.apartment" :placeholder="$t('msg.message.PleaseEnter')"  />

                            </div>
                        </div>

                    </div>
                    <div class="personRItem">
                        <div class="personRItemAvatar"  :style="{width: '10%',color:isDark? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">{{$t('msg.message.phone')}}</div>
                        <div class="personRItemR" style="width: 84%;">
                            <div :class="isDark? 'searchBox': 'searchBoxLight' ">
                                <el-input v-model="inputAdress.data.phoneNumber" :placeholder="$t('msg.message.PleaseEnter')" />

                            </div>
                        </div>

                    </div>
                    <div class="personRItem">
                        <div class="personRItemAvatar" style="width: 10%;"></div>
                        <div class="personRItemR" style="width: 84%;">
                            <div class="searchBox2" @click="setCurUserShipAddressFunc">
                                {{$t('msg.message.save')}}

                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <!-- 出货量 -->
            <div class="buyEgg" v-show="menuIshowObj.menuIshow3">
                <div class="noneBox" v-show="shipmentList.list.length === 0">
                    <img src="../../assets/img/personCenter/none.png" alt="">
                    <div class="noenText" :style="{color:isDark?'#fff':'#000'}">
                        {{$t('msg.message.DataIsEmpty')}}！
                    </div>
                    <!-- <div class="nowGo">立即前往</div> -->
                </div>
                <div class="eggList" v-show="shipmentList.list.length">

                    <div class="eggItems eggi1"  :style="{width:'96%','justify-content': 'space-between','align-items': 'center',background:isDark ? colorObjInfo.data.darkbgColor: colorObjInfo.data.lightbgColor,color:isDark? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}"
                        v-for="(item) in shipmentList.list" :key="item.id">
                        <!-- <img src="../../assets/img/personCenter/noSelect.png"
                            style="width: 18px;height: 18px;cursor: pointer;" alt=""> -->
                        <div class="eggItemsL">
                            <div :class="locale === 'en' ? 'eggItemsLImg egg2Left' : 'eggItemsLImg egg2'" style="color:#fff">{{$t('msg.message.WinningPrizes')}}
                            </div>
                            <img class="eggItemsLImg egg3" src="../../assets/img/personCenter/getPrice.png"
                                 alt="">
                            <div class="eggItemsLPro">
                                <el-image style="width: unset;" class="eggiimg" :src="baseUrl + '/' + item.userGifts.img" fit="contain" />
                                <div class="eggItemsLProInfo">
                                    <div class="eggItemsLProInfoText padbot24">
                                        <div class="eggItemsLProInfoName">{{ item.userGifts.name || '' }}</div>
                                        <div class="eggItemsLProInfoLeavel" style="color:#fff">{{ item.userGifts.typeName || '' }}
                                        </div>
                                    </div>
                                    <div class="eggItemsLProInfoDate w388">
                                        <div class="dialogInfoBox"
                                            :style="{ display: 'unset', marginBottom: !isShow ? '0' : '16px', 'border-bottom': !isShow ? 'unset' : '1px solid #999', 'padding-bottom': 0 }">
                                            <div class="dialogInfoText" :style="{color:isDark? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">
                                                {{$t('msg.message.ReceivingAddress')}}：{{ item.addressCountry }} {{ item.addressRegion }} {{ item.addressCity }}
                                                {{ item.addressStreet }}{{ item.addressApartment }}
                                            </div>
                                            <div class="dialogInfoText" :style="{color:isDark? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">
                                                {{$t('msg.message.consignee')}}：XXX
                                            </div>
                                            <div class="dialogInfoText" :style="{color:isDark? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">
                                                {{$t('msg.message.phone')}}：{{ item.addressPhoneNumber }}
                                            </div>
                                            <div class="dialogInfoText" :style="{color:isDark? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">
                                                {{$t('msg.message.zipCode')}}：{{ item.addressZipCode }}
                                            </div>
                                            <!--  'TO_BE_RECEIVED' -->
                                            <div class="dialogInfoText" v-if="item.status === 'TO_BE_RECEIVED'" :style="{color:isDark? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">
                                                {{$t('msg.message.trackingNumber')}}：{{ item.expressTrackingNumber }}  {{ ' '+item.expressDeliveryType }}
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <!-- <div class="eggItemsLProInfoLine"></div> -->
                        <div class="eggItemsR" style="    justify-content: flex-end;">
                            <div class="eggItemsRXqing">

                                <!-- <div v-show="item.nature === 'PLATFORM_VIRTUAL_CURRENCY'" class="lookDetails"
                                    style="display: flex;align-items: center;width: 180px;height: 49px;line-height: 49px;justify-content: center;background: unset;border: 1px solid #FFAA00;color: #FFAA00;">
                                    <img src="../../assets/img/header/money.png" style="width: 19px;margin-right: 3px;"
                                        alt="">
                                    <div>兑换150000</div>
                                </div> -->
                                <div class="lookDetails look1" @click="confirmReceiptClick(item)" style="display: flex;color:#EFA23F;align-items: center;justify-content: center;background: unset;border: 1px solid #EFA23F;" v-if="item.status === 'TO_BE_RECEIVED'">
                                    {{$t('msg.message.confirmReceipt')}}
                                </div>
                                <div class="lookDetails look1"
                                    style="display: flex;align-items: center;justify-content: center;"
                                    v-if="item.status === 'TO_BE_SHIPPED' || item.status === 'TO_BE_RECEIVED'">
                                    {{ item.statusName }}</div>
                                <div class="lookDetails w180" v-else
                                    style="display: flex;background: #D8D8D8;color: #000;align-items: center;justify-content: center;">
                                    {{locale === 'en' ? 'Signed for' : '已签收'}}</div>
                            </div>
                        </div>
                    </div>
                    <div style="display: flex;justify-content: flex-end;">
                        <el-config-provider :locale="localeCom">
                            <el-pagination v-model:current-page="currentPage5" v-model:page-size="pageSize5"
                            :page-sizes="[6, 12, 24, 48]" :small="small" :disabled="disabled" :background="background"
                            layout="total, sizes, prev, pager, next, jumper" :total="shipmentTotal"
                            @size-change="handleSizeChange3" @current-change="handleCurrentChange3" />
                        </el-config-provider>

                    </div>
                </div>
            </div>
            <!-- 项目 -->
            <div class="buyEgg" v-show="menuIshowObj.menuIshow2">
                <div class="noneBox" v-show="projectList.list.length === 0">
                    <img src="../../assets/img/personCenter/none.png" alt="">
                    <div class="noenText" :style="{color:isDark?'#fff':'#000'}">
                        {{$t('msg.message.DataIsEmpty')}}！
                    </div>
                    <!-- <div class="nowGo">立即前往</div> -->
                </div>
                <div class="eggList" v-show="projectList.list.length">

                    <div class="eggItems eggi1" :style="{'justify-content': 'space-between','align-items': 'center',background:isDark ? colorObjInfo.data.darkbgColor: colorObjInfo.data.lightbgColor,color:isDark? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}"
                        v-for="(item) in projectList.list" :key="item.id">
                        <!-- <img class="imgs1" src="../../assets/img/personCenter/noSelect.png"
                            style="cursor: pointer;" alt=""> -->
                        <div class="eggItemsL">
                            <div :class="locale === 'en' ? 'eggItemsLImg egg2Left' : 'eggItemsLImg egg2'"  style="color:#fff">{{$t('msg.message.WinningPrizes')}}
                            </div>
                            <img class="eggItemsLImg egg3" src="../../assets/img/personCenter/getPrice.png"
                                 alt="">
                            <div class="eggItemsLPro">
                                <el-image style="width: unset;" class="eggiimg" :src="baseUrl + '/' + item.img" fit="contain" />
                                <!-- <img style="width: unset;" class="eggiimg" :src="baseUrl + '/' + item.img" alt=""> -->
                                <div class="eggItemsLProInfo">
                                    <div class="eggItemsLProInfoText">
                                        <div class="eggItemsLProInfoName">{{ item.name }}</div>
                                        <div class="eggItemsLProInfoLeavel" style="color:#fff">{{ item.typeName }}
                                        </div>
                                    </div>
                                    <div class="eggItemsLProInfoDate w288" >
                                        <div class="dialogInfoBox"
                                            :style="{ marginBottom: !isShow ? '0' : '16px', 'border-bottom': !isShow ? 'unset' : '1px solid #999', 'padding-bottom': 0 }">
                                            <div class="dialogInfoItems">
                                                <div class="dialogInfoItemsText">{{$t('msg.message.getIt')}}</div>
                                                <div class="dialogInfoItemsMoney">
                                                    <img src="../../assets/img/header/money.png" alt="">
                                                    <div>{{numberExchange(item.val)  }}</div>
                                                </div>
                                            </div>
                                            <div class="dialogInfoItems">
                                                <div class="dialogInfoItemsText">{{$t('msg.message.CashReturnValue')}}</div>
                                                <div class="dialogInfoItemsMoney">
                                                    <img src="../../assets/img/header/money.png" alt="">
                                                    <div>{{ numberExchange(item.val) }}</div>
                                                </div>
                                            </div>
                                            <div class="dialogInfoItems">
                                                <div class="dialogInfoItemsText">{{$t('msg.message.Transportationcosts')}}</div>
                                                <div class="dialogInfoItemsMoney">
                                                    <!-- <img src="../../assets/img/header/money.png" alt=""> -->
                                                    <div>{{$t('msg.message.free')}}</div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <!-- <div class="eggItemsLProInfoLine"></div> -->
                        <div class="eggItemsR" style="justify-content: flex-end;">
                            <!-- <img class="eggItemsRImg" src="../../assets/img/personCenter/getPrice.png" alt=""> -->
                            <div class="eggItemsRXqing">
                                <!-- <div class="eggItemsRXqingTop">
                                    <div class="eggItemsRXqingName">{{ item.orderBoxInfo.orderGiftInfo.name || '暂无数据' }}</div>
                                    <div class="eggItemsRXqingMoney">
                                        <img src="../../assets/img/header/money.png" alt="">
                                        <div>{{ item.orderAmount || '暂无数据' }}</div>
                                    </div>
                                </div> -->
                                <div v-show="item.nature === 'PLATFORM_VIRTUAL_CURRENCY'" class="lookDetails w180"
                                    @click="exchageShow = true,exchageItem = item"
                                    style="display: flex;align-items: center;justify-content: center;background: unset;border: 1px solid #FFAA00;color: #FFAA00;">
                                    <img class="w19" src="../../assets/img/header/money.png" 
                                        alt="">
                                    <div>{{$t('msg.message.exchange')}}{{numberExchange(item.val)  }}</div>
                                </div>

                                <!-- <div class="lookDetails"
                                v-show="item.nature === 'PHYSICAL_ITEM'" 
                                    style="display: flex;align-items: center;width: 180px;height: 49px;justify-content: center;">
                                    查看详情</div> -->
                                <div v-show="item.nature === 'PHYSICAL_ITEM'" class="lookDetails look1"
                                    @click="nowPhysicalItemPickup(item.id)"
                                    style="display: flex;align-items: center;justify-content: center;">
                                    {{$t('msg.message.ImmediatePickup')}}</div>
                            </div>
                        </div>
                    </div>
                    <div style="display: flex;justify-content: flex-end;">
                        <el-config-provider :locale="localeCom">
                            <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
                            :page-sizes="[6, 12, 24, 48]" :small="small" :disabled="disabled" :background="background"
                            layout="total, sizes, prev, pager, next, jumper" :total="projectTotal"
                            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                        </el-config-provider>

                    </div>

                </div>


            </div>
            <!-- 购买的扭蛋 -->
            <div class="buyEgg" v-show="menuIshowObj.menuIshow4">
                <div class="noneBox" v-show="eggList.list.length === 0">
                    <img src="../../assets/img/personCenter/none.png" alt="">
                    <div class="noenText" :style="{color:isDark?'#fff':'#000'}">
                        {{$t('msg.message.purchasedAnyTwisted')}}！
                    </div>
                    <div class="nowGo" @click="gotoPrize" :style="{color:isDark?'#fff':'#000'}">{{$t('msg.message.GoImmediately')}}</div>
                </div>
                <div class="eggList" v-if="eggList.list.length">
                    <div class="eggItems"   :style="{background:isDark ? colorObjInfo.data.darkbgColor: colorObjInfo.data.lightbgColor,color:isDark? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}" v-for="(item) in eggList.list" :key="item.id">
                        <div class="eggItemsL">
                            <div :class="locale === 'en' ? 'eggItemsLImg eggImg2Left' : 'eggItemsLImg eggImg2'"  style="color:#fff">{{$t('msg.message.WinningPrizes')}}
                            </div>
                            <img class="eggItemsLImg" src="../../assets/img/personCenter/getPrice.png" alt="">
                            <div class="eggItemsLPro">
                                <el-image :src="baseUrl + '/' + item?.orderBoxInfo?.orderGiftInfo?.img" fit="contain" />
                                <!-- <img :src="baseUrl + '/' + item?.orderBoxInfo?.orderGiftInfo?.img" alt=""> -->
                                <div class="eggItemsLProInfo">
                                    <div class="eggItemsLProInfoText">
                                        <div class="eggItemsLProInfoName">{{ item?.orderBoxInfo?.orderGiftInfo?.name || '' }}</div>
                                        <div class="eggItemsLProInfoLeavel" style="color:#fff">{{
            item?.orderBoxInfo?.orderGiftInfo?.typeName || ''
        }}
                                        </div>
                                    </div>
                                    <div class="eggItemsLProInfoDate">{{$t('msg.message.OpenOn')}} {{ item?.orderTime || '' }}</div>
                                </div>

                            </div>
                        </div>
                        <div class="eggItemsLProInfoLine"></div>
                        <div class="eggItemsR">
                            <el-image class="eggItemsRImg" :src="baseUrl + '/' +  item?.orderBoxInfo?.img" fit="contain"></el-image>
                            <!-- <img class="eggItemsRImg" :src="baseUrl + '/' +  item?.orderBoxInfo?.img"
                                alt=""> -->
                            <div class="eggItemsRXqing">
                                <div class="eggItemsRXqingTop">
                                    <div class="eggItemsRXqingName">{{ item?.orderBoxInfo?.name }}</div>
                                    <div class="eggItemsRXqingMoney">
                                        <img src="../../assets/img/header/money.png" alt="">
                                        <div>{{numberExchange(item?.orderAmount)  || '' }}</div>
                                    </div>
                                </div>
                                <div class="lookDetails"  @click="lookDetailEgg(item)">{{$t('msg.message.Viewdetails')}}</div>
                            </div>
                        </div>
                    </div>
                    <div style="display: flex;justify-content: flex-end;">
                        <el-config-provider :locale="localeCom">
                            <el-pagination v-model:current-page="currentPage4s" v-model:page-size="pageSize4s"
                            :page-sizes="[6, 12, 24, 48]" :small="small" :disabled="disabled" :background="background"
                            layout="total, sizes, prev, pager, next, jumper" :total="projectTotals"
                            @size-change="handleSizeChange2" @current-change="handleCurrentChange2" />
                        </el-config-provider>

                    </div>
                </div>
            </div>
            <!-- 提取 -->
            <div class="personR" v-show="menuIshowObj.menuIshow5">
                <div class="personRLtitleBig" :style="{background:isDark ? colorObjInfo.data.darkbgColor: colorObjInfo.data.f1Color}">
                    <div class="personRLtitle" :style="{width:locale === 'en' ? '220px' : '150px',color:isDark ? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">{{$t('msg.message.ExtractYourPoints')}}</div>

                </div>
                <div class="getMoneyBig" :style="{background:isDark ? colorObjInfo.data.darkbgColor: colorObjInfo.data.lightbgColor}">
                    <div class="betweenDis">
                        <div class="getMoneyTop">
                            <div :style="{color:isDark ? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">{{$t('msg.message.withdrawalAmount')}}</div>
                            <div :style="{color:isDark ? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">{{$t('msg.message.chargedDuring')}}</div>
                            <div :style="{color:isDark ? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">{{$t('msg.message.ClaimAmount')}}：0.00</div>
                        </div>
                        <div style="width: 100%">
                            <el-button color="#FC8704" class="sureBtn" @click="getSerachShow = true">{{$t('msg.message.withdrawalAmount')}}</el-button>

                        </div>
                    </div>

                    <div :class="isDark?'getMoneyInput': 'getMoneyInputL'">
                        <el-select v-model="value" class="m-2 selectClass" @change="changeOptions" :placeholder="$t('msg.message.project')">
                            <el-option v-for="item in sortOptions" :key="item.value" :label="item.name"
                                :value="item.value" />
                        </el-select>

                    </div>
                    <div :class="isDark?'getMoneyInput': 'getMoneyInputL'">
                        <el-select v-model="value" class="m-2 selectClass" @change="changeOptions"
                            placeholder="XXXXXXXX">
                            <el-option v-for="item in sortOptions" :key="item.value" :label="item.name"
                                :value="item.value" />
                        </el-select>
                    </div>
                    <div :class="isDark?'getMoneyInput': 'getMoneyInputL'">
                        <el-input v-model="inputNiubi" type="number" placeholder="请输入钱包地址..." />
                    </div>
                    <div class="searchBox2s" style="padding-top: 10px">
                        <el-button color="#FC8704" class="sureBtn" @click="addMoney">{{$t('msg.message.confirm')}}</el-button>
                    </div>
                    <div class="getMoneybot">
                        {{$t('msg.message.OnlyUsers')}}
                    </div>
                </div>
            </div>
            <!-- 奖励 -->
            <div class="personR personR22" :style="{background:isDark ? colorObjInfo.data.darkbgColor: colorObjInfo.data.lightbgColor}" v-show="menuIshowObj.menuIshow6">
                <div class="levBox" style="padding-top: 0;">
                    <div class="w280" :style="{color:isDark ? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">{{$t('msg.message.UserLevel')}}</div>
                    <div class="levBoxR" :style="{color:isDark ? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">1</div>
                </div>
                <div class="levBox">
                    <div class="w280" :style="{color:isDark ? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">{{$t('msg.message.TotalExperience')}}</div>
                    <div class="levBoxR" :style="{color:isDark ? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">25496</div>
                </div>
                <div class="levPressMain">
                    <div class="levPressMainT">
                        <div  class="w280"  :style="{color:isDark ? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">{{$t('msg.message.CurrentProgress')}}：</div>
                        <div class="levPress">
                            <el-progress :text-inside="true" :stroke-width="26" :percentage="70" color="#F54141" />
                        </div>
                    </div>
                    <div class="levPressMainB"  :style="{color:isDark ? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">
                        {{$t('msg.message.Note')}}
                    </div>
                </div>
                <div class="eveyPrize">
                    <div :style="{color:isDark ? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">{{$t('msg.message.DailyRewards')}}</div>
                    <div class="eveyPrize2" :style="{background:isDark ? colorObjInfo.data.darkbgColor: colorObjInfo.data.lightbgColor}">
                        <div :style="{color:isDark ? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">{{$t('msg.message.Upgrade')}}</div>
                        <div :style="{color:isDark ? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">{{$t('msg.message.Rule')}}</div>
                    </div>
                </div>
                <div class="countTime">
                    <div class="countTimeText" :style="{color:isDark ? colorObjInfo.data.darkTextColor: colorObjInfo.data.lightTextColor}">{{$t('msg.message.TheNextReward')}}</div>
                    <div class="countTimeDate">09h 35m 44s</div>
                </div>
                <div class="countPrizeMain">
                    <div class="countPrizeItem">
                        <div class="countPrizeLeavel">1{{$t('msg.message.level')}}</div>
                        <div class="countPrizeImg">
                            <img src="../../assets/img/personCenter/falaliEgg.png" alt="">
                        </div>
                        <div class="countPrizeNameBox">
                            <div class="countPrizeName">{{$t('msg.message.jewelry')}} X1</div>
                            <div class="countPrizePrice">
                                <img src="../../assets/img/header/money.png" alt="">
                                <div>100000</div>
                            </div>
                        </div>

                    </div>
                    <div class="countPrizeItem">
                        <div class="countPrizeLeavel">1{{$t('msg.message.level')}}</div>
                        <div class="countPrizeImg">
                            <img src="../../assets/img/personCenter/falaliEgg.png" alt="">
                        </div>
                        <div class="countPrizeNameBox">
                            <div class="countPrizeName">{{$t('msg.message.jewelry')}} X1</div>
                            <div class="countPrizePrice">
                                <img src="../../assets/img/header/money.png" alt="">
                                <div>100000</div>
                            </div>
                        </div>

                    </div>
                    <div class="countPrizeItem">
                        <div class="maskBox">
                            <img src="../../assets/img/personCenter/lock.png" alt="">
                        </div>
                        <div class="countPrizeLeavel">1{{$t('msg.message.level')}}</div>
                        <div class="countPrizeImg">
                            <img src="../../assets/img/personCenter/falaliEgg.png" alt="">
                        </div>
                        <div class="countPrizeNameBox">
                            <div class="countPrizeName">{{$t('msg.message.jewelry')}} X1</div>
                            <div class="countPrizePrice">
                                <img src="../../assets/img/header/money.png" alt="">
                                <div>100000</div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <!-- 充值 -->
            <div class="personR" v-show="menuIshowObj.menuIshow7">
                <div class="qustionList">
                    <div class="questionItem" :style="{'border-bottom': 'unset',background:isDark?colorObjInfo.data.darkbgColor:colorObjInfo.data.f1Color}">
                        <div class="RechargeDialogTitleRBig">
                            <div :class="showObj.show1 ?'RechargeDialogTitle borbot8' : 'RechargeDialogTitle'"
                                :style="{color:isDark ?colorObjInfo.data.darkTextColor:colorObjInfo.data.lightTextColor}">
                                {{$t('msg.message.CreditDebitCards')}}
                            </div>
                            <div class="RechargeDialogTitleR" v-show="showObj.show1">
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <!-- <div></div> -->
                            </div>
                        </div>
                        <img @click="changeShowClick(1)"
                            :src="showObj.show1 ? getImageUrl('changeSmall.png') : getImageUrl('changeBig.png')" alt="" v-show="isDark">
                            <img @click="changeShowClick(1)"
                            :src="showObj.show1 ? getImageUrl2('close.png') : getImageUrl2('add.png')" alt="" v-show="!isDark">
                    </div>
                    <div class="questionDetail" v-show="showObj.show1" :style="{background:isDark?colorObjInfo.data.darkbgColor:colorObjInfo.data.lightbgColor,color:isDark ?colorObjInfo.data.darkTextColor:colorObjInfo.data.lightTextColor}">
                        <div class="RechargeMoneyCount">
                            <div class="balanceBox">
                                <div class="balance">{{$t('msg.message.AccountBalance')}}</div>
                                <div class="balanceDiv">
                                    <img src="../../assets/img/header/money.png" alt="">
                                    <div>1000</div>
                                </div>
                            </div>
                            <div class="monBox">
                                <div class="RechargeMoneyCountWord" :style="{color:isDark ?colorObjInfo.data.darkTextColor:colorObjInfo.data.lightTextColor}">
                                    {{$t('msg.message.selectTheAmount')}}
                                </div>
                                <div class="RechargeMoneyCountItem" style="width: 36%;">
                                    <div :class="countIndexCode === index ? 'RechargeMoneyCountImg h38' : 'RechargeMoneyCountImgActive h38'"
                                        v-for="(item, index) in moneyCountList" @click="moneyCountClick(index)"
                                        :key="item.id" style="width: 60%;">
                                        <img src="../../assets/img/header/money.png" alt="">
                                        <div :style="{ color: countIndexCode === index || !isDark ? '#000' : '#fff' }">{{
            item.count }}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="RechargeMoneyCountItem">
                                <div @click="changeCountIndex(index)"
                                    :class="countIndex === index ? 'RechargeMoneyCountImg' : 'RechargeMoneyCountImgActive'"
                                    v-for="(item, index) in eggMoneyCountList" :key="item.id">
                                    <img src="../../assets/img/header/money.png" alt="">
                                    <div>{{ item.count }}</div>
                                </div>
                            </div>
                            <div :class="!isDark?'countInput2' :'countInput'">
                                <img  class="w20" src="../../assets/img/header/money.png" alt="">
                                <el-input v-model="inputNiubi" type="number" placeholder="请输入自定义扭币数量..." />
                            </div>
                            <div class="sureBtnBox">
                                <el-button color="#F6AE41" class="sureBtn">{{$t('msg.message.Recharge')}}</el-button>
                            </div>
                            <div :class="!isDark?'chengnianBox2': 'chengnianBox'">
                                <el-checkbox v-model="checked1" :label="$t('msg.message.Years18')" size="large" />
                            </div>

                            <div class="codeInputBox">
                                <div class="codeInputItem">
                                    <div class="codeInputItemImg">
                                        <img src="../../assets/img/header/money.png" alt="">
                                    </div>
                                    <div class="codeInput" style="justify-content: center;width: 31%;">
                                        1
                                    </div>
                                </div>
                                <div class="syscDengyu" :style="{color:isDark ?colorObjInfo.data.darkTextColor:colorObjInfo.data.lightTextColor}">=</div>
                                <div class="codeInputItem" style="padding-left: 21%;width: 31%;">
                                    <div class="codeInputItemImg">
                                        <img src="../../assets/img/header/money.png" alt="">
                                    </div>
                                    <div class="codeInput" style="justify-content: center;width: 42%;">
                                        1
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="qustionList">
                    <div class="questionItem" :style="{'border-bottom': 'unset',background:isDark?colorObjInfo.data.darkbgColor:colorObjInfo.data.f1Color}">
                        <div class="RechargeDialogTitleRBig">
                            <div  :class="showObj.show1 ?'RechargeDialogTitle borbot8' : 'RechargeDialogTitle'"
                                :style="{color:isDark ?colorObjInfo.data.darkTextColor:colorObjInfo.data.lightTextColor}">
                                {{$t('msg.message.Cryptocurrency')}}
                            </div>
                            <div class="RechargeDialogTitleR" v-show="showObj.show2">
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <!-- <div></div> -->
                            </div>
                        </div>
                         <img @click="changeShowClick(2)"
                            :src="showObj.show2 ? getImageUrl('changeSmall.png') : getImageUrl('changeBig.png')" alt="" v-show="isDark">
                            <img @click="changeShowClick(2)"
                            :src="showObj.show2 ? getImageUrl2('close.png') : getImageUrl2('add.png')" alt="" v-show="!isDark">
                    </div>
                    <div v-show="showObj.show2" class="padtop20" :style="{background:isDark?colorObjInfo.data.darkbgColor:colorObjInfo.data.lightbgColor,color:isDark ?colorObjInfo.data.darkTextColor:colorObjInfo.data.lightTextColor}">
                        <div class="RechargeMoneyCountItem">
                            <div :class="countIndexCode === index ? 'RechargeMoneyCountImg h38' : 'RechargeMoneyCountImgActive  h38'"
                                v-for="(item, index) in moneyCountListBtc" @click="moneyCountClick(index)"
                                :key="item.id" style="width: 10%;">
                                <img src="../../assets/vue.svg" alt="">
                                <div :style="{ color: countIndexCode === index || !isDark ? '#000' : '#fff' }">{{ item.count }}
                                </div>
                            </div>
                        </div>
                        <div class="titleBtc" :style="{color:isDark ?colorObjInfo.data.darkTextColor:colorObjInfo.data.lightTextColor}">
                            {{$t('msg.message.BTCRecharge')}}
                        </div>
                        <div class="btcCodeBox">
                            <div class="btcCode" :style="{color:isDark ?colorObjInfo.data.darkTextColor:colorObjInfo.data.lightTextColor}">1GNB5NpZQuhmKGbB5AS256fuSdW7Ma77xb</div>
                            <div class="btcCopy">
                                <img src="../../assets/img/header/copy.png" alt="">
                            </div>
                        </div>
                        <div class="erweiCodeBox">
                            <div class="eerweiCodeImg">
                                <img src="../../assets/vue.svg" alt="">
                            </div>
                            <div class="codeText" :style="{color:isDark ?colorObjInfo.data.darkTextColor:colorObjInfo.data.lightTextColor}">
                                {{$t('msg.message.availableFor')}}： 0d oh 2m 26s
                            </div>
                        </div>
                        <div class="codeTips">
                            <div :style="{color:isDark ?colorObjInfo.data.darkTextColor:colorObjInfo.data.lightTextColor}">{{$t('msg.message.OnlyUseBTC')}}</div>
                            <div style="color: #F2254D;">{{$t('msg.message.MinimumDeposit')}}</div>
                            <div :style="{color:isDark ?colorObjInfo.data.darkTextColor:colorObjInfo.data.lightTextColor}">{{$t('msg.message.DepositsBelow')}}</div>
                        </div>
                        <div class="codeInputBox">
                            <div class="codeInputItem">
                                <div class="codeInputItemImg">
                                    <img src="../../assets/img/header/money.png" alt="">
                                </div>
                                <div :class="!isDark ? 'codeInput2' : 'codeInput'">
                                    <el-input v-model="input2" placeholder="" type="number" />
                                </div>
                            </div>
                            <div class="syscDengyu" :style="{color:isDark ?colorObjInfo.data.darkTextColor:colorObjInfo.data.lightTextColor}">=</div>
                            <div class="codeInputItem">
                                <div class="codeInputItemImg">
                                    <img src="../../assets/img/header/money.png" alt="">
                                </div>
                                <div :class="!isDark ? 'codeInput2' : 'codeInput'">
                                    <el-input v-model="input2" placeholder="" type="number" />
                                </div>
                            </div>
                        </div>
                        <div class="sureBtnBox">
                            <el-button color="#F6AE41" class="sureBtn">{{$t('msg.message.Recharge')}}</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 修改密码弹窗 -->
    <div class="mask" style="z-index: 200;" v-show="maskShow3">
        <div class="dialog">
            <div class="RechargeDialog editpas"
                >
                <div
                    style="display: flex;align-items: center;justify-content: space-around;position: relative;width: 100%;">
                    <div class="RechargeWord">{{$t('msg.message.ChangePassword')}}</div>

                    <img src="../../assets/img/policy/close.png" class="deleteImg" @click="maskShow3 = false" alt="">

                </div>
                <div class="countInput pwdInput">
                    <el-input type="password" v-model="editPassWord.data.pwd" :placeholder="$t('msg.message.PleaseEnterNew')+$t('msg.message.password')" />
                </div>
                <div class="countInput pwdInput">
                    <el-input type="password" v-model="editPassWord.data.pwd2" :placeholder="$t('msg.message.PleaseEnterNewAgain')" />
                </div>
                <div class="sureBtnBox padtop10" style="width: 93%;">
                    <el-button color="#5BCE3A" class="sureBtn" @click="sureEditPwd">{{$t('msg.message.confirm')}}</el-button>
                </div>
                <!-- <div class="noAccount">
                    <div>已有账号？</div>
                    <div style="cursor: pointer;" @click="maskShow3 = false,maskShow2 = true">登录</div>
                </div> -->
            </div>

        </div>

    </div>
    <!-- 修改用户名弹窗 -->
    <editPopup :dataVal="acVal" :show="acShow" @changeDataVal="changeDataValAc" :title="$t('msg.message.userName')" type="account"
        @close="closeAcPupop" @sure="acSure"></editPopup>
    <!-- 修改昵称弹窗 -->
    <editPopup :dataVal="usernameVal" @changeDataVal="changeDataValUn" :show="usernameShow" :title="$t('msg.message.nickName')" type="username"
        @close="closePupop" @sure="usernameSure"></editPopup>
    <!-- 修改邮箱弹窗 -->
    <editPopup :dataVal="emailVal" :show="emailShow" @changeDataVal="changeDataValEm" :title="$t('msg.message.email')" type="email"
        @close="closeEmPupop" @sure="emailSure"></editPopup>
    <!-- 修改手机号码弹窗 -->
    <editPopup :dataVal="telVal" :show="telShow" @changeDataVal="changeDataValTe" :title="$t('msg.message.phone')" type="tel"
        @close="closeTelPupop" @sure="telSure"></editPopup>
    <!-- 确认收货提示框 -->
    <div class="mask" style="z-index: 200;" v-show="sureGetShow">
        <div class="dialog">
            <div class="RechargeDialog h200"
                style="background: #0F0F0F;margin-top: 100px;display: flex;flex-direction: column;align-items: center;border: 1px solid #fff;">
                <div
                    style="display: flex;align-items: center;justify-content: space-around;position: relative;width: 100%;">
                    <div class="RechargeWord">{{$t('msg.message.KindReminder')}}</div>

                    <img src="../../assets/img/policy/close.png" class="deleteImg" @click="sureGetShow = false" alt="">
                </div>
                <div class="countInput pwdInput tips" style="justify-content: center;">
                    {{ locale === 'en' ? 'Are you sure you have received the goods?' : '您是否确认收货?' }}
                    <!-- <el-input  v-model="props.dataVal" @input="changeDataVal" :placeholder="`${$t('msg.message.PleaseEnterNew')} ${title}`" /> -->
                </div>
                <div class="sureBtnBox" style="padding-top: 10px;width: 93%;display: flex;justify-content: space-between;">
                    <el-button color="#5BCE3A" class="sureBtn" @click="sureGetShow = false" style="width: 45%;">{{ $t('msg.message.cancel') }}</el-button>
                    <el-button color="#5BCE3A" class="sureBtn" @click="sureGet" style="width: 45%;">{{ $t('msg.message.confirm') }}</el-button>
                </div>
            </div>
        </div>
    </div>
     <!-- 兑换虚拟币提示框 -->
     <div class="mask" style="z-index: 200;" v-if="exchageShow">
        <div class="dialog">
            <div class="RechargeDialog h200"
                style="background: #0F0F0F;margin-top: 100px;display: flex;flex-direction: column;align-items: center;border: 1px solid #fff;">
                <div
                    style="display: flex;align-items: center;justify-content: space-around;position: relative;width: 100%;">
                    <div class="RechargeWord">{{$t('msg.message.KindReminder')}}</div>

                    <img src="../../assets/img/policy/close.png" class="deleteImg" @click="exchageShow = false" alt="">
                </div>
                <div class="countInput pwdInput tips" style="justify-content: center;">
                    {{ locale === 'en' ? `Do you want to exchange it：${ exchageItem.name}?` : `是否兑换：${ exchageItem.name}?` }}
                    <!-- <el-input  v-model="props.dataVal" @input="changeDataVal" :placeholder="`${$t('msg.message.PleaseEnterNew')} ${title}`" /> -->
                </div>
                <div class="sureBtnBox" style="padding-top: 10px;width: 93%;display: flex;justify-content: space-between;">
                    <el-button color="#5BCE3A" class="sureBtn" @click="exchageShow = false" style="width: 45%;">{{ $t('msg.message.cancel') }}</el-button>
                    <el-button color="#5BCE3A" class="sureBtn" @click="getPlatformVirtualCurrencyExchange" style="width: 45%;">{{ $t('msg.message.confirm') }}</el-button>
                </div>
            </div>
        </div>
    </div>
    <!-- 收货地址提示框 -->
    <div class="mask" style="z-index: 200;" v-show="addressTipsShow">
        <div class="dialog">
            <div class="RechargeDialog h200"
                style="background: #0F0F0F;margin-top: 100px;display: flex;flex-direction: column;align-items: center;border: 1px solid #fff;">
                <div
                    style="display: flex;align-items: center;justify-content: space-around;position: relative;width: 100%;">
                    <div class="RechargeWord">{{$t('msg.message.KindReminder')}}</div>

                    <img src="../../assets/img/policy/close.png" class="deleteImg" @click="addressTipsShow = false" alt="">
                </div>
                <div class="countInput pwdInput tips">
                    {{ $t('msg.message.confirmThat') + addressTipObj.data.country +' '+addressTipObj.data.city+' '+addressTipObj.data.region+' '+addressTipObj.data.street+' '+addressTipObj.data.apartment+'？' }}
                    <!-- <el-input  v-model="props.dataVal" @input="changeDataVal" :placeholder="`${$t('msg.message.PleaseEnterNew')} ${title}`" /> -->
                </div>
                <div class="sureBtnBox" style="padding-top: 10px;width: 93%;display: flex;justify-content: space-between;">
                    <el-button color="#5BCE3A" class="sureBtn" @click="addressTipsShow = false" style="width: 45%;">{{ $t('msg.message.cancel') }}</el-button>
                    <el-button color="#5BCE3A" class="sureBtn" @click="nowTihuo" style="width: 45%;">{{ $t('msg.message.confirm') }}</el-button>
                </div>
            </div>
        </div>
    </div>
    <!-- 修改弹窗 -->
    <div class="mask" style="z-index: 200;" v-show="getSerachShow">
        <div class="dialog">
            <div class="RechargeDialog editpas"
                >
                <div
                    style="display: flex;align-items: center;justify-content: space-around;position: relative;width: 100%;">
                    <div class="RechargeWord">提现结果查询</div>
                    <img src="../../assets/img/policy/close.png" class="deleteImg" @click="getSerachShow = false"
                        alt="">
                </div>
                <div class="countInput pwdInput"
                    style="flex-direction: column;align-items: flex-start; background: unset;border: unset;">
                    <div style="padding-bottom: 4px;" class="tixianBox">
                        <div class="tixianTop">提现进度</div>
                        <div class="tixianCenter">
                            <el-progress :text-inside="true" :stroke-width="26" :percentage="70" color="#F54141" />
                        </div>
                    </div>
                    <div style="padding-bottom: 4px;" class="tixianBto">提现结果：提现中</div>
                    <!-- <div>我们的客服服务时间为周一至周五上午 9:00 至下午 6:00 在联系方式SUPPORT@EJELDAW.COM找到我们</div> -->
                </div>

            </div>

        </div>

    </div>

</template>

<style scoped>
@import url('./index.css');
</style>